﻿@using OA.AspNetCore.Html;
@using OA.Model;
@using OA.Core.Model;

@{
    ViewBag.Title = "编辑打印模版";
    Layout = "~/Areas/Admin/Views/Shared/_form_layout.cshtml";


}
<link href="/admin/iconfont/remixicon.css" rel="stylesheet">
<style type="text/css">
    .list-group-item {
        min-height: 32px;
        cursor: pointer;
    }

        .list-group-item a {
            border: 1px solid #ddd;
            color: #ffffe6 !important;
            display: block;
            cursor: move;
            font-size: 12px;
            letter-spacing: 0;
            padding-right: 4px;
        }

            .list-group-item a i {
                font-size: 16px;
                display: inline-block;
                vertical-align: middle;
                margin-bottom: 0px;
                margin-left: 6px;
                color: #808080
            }

            .list-group-item a span {
                display: inline-block;
                vertical-align: middle;
                color: #808080;
                cursor: move;
                font-size: 12px;
                letter-spacing: 0;
            }

    #Controls .list-group-item {
        font-size: 12px;
        display: block;
        min-width: 86px;
        line-height: 26px;
        position: relative;
        float: left;
        left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 1%;
        float: left;
    }

   
        #Content table td{height:20px;}

    #Property .title, .tdConfig div{
        margin: 6px 0;
        clear:both;
    }
    #tdConfig div{float:left;clear:both;}
    #tdConfig input {
        margin-bottom: 6px;
        width: 120px;
        float: left;
    }
    #tdConfig i {
        float: left;
        font-size: 18px;
        color: red;
        line-height:38px;
        margin-left:10px;
        cursor:pointer;
    }
    .layui-table, .layui-table-view {
        margin: 0px !important;
        margin-top: -1px !important;
    }
    

</style>
<div style="background-color: #fff; padding: 10px; border: 1px solid #ddd;clear:both;height:42px;">
    <div style="float:right;width:300px;text-align:right;display:inline-block;">
        <button type="button" class="layui-btn Preview">打印预览</button>
        <button type="button" class="layui-btn layui-btn-danger saveCustomForm">保存打印模版</button>
    </div>

</div>
<div class="layui-form layui-tab-content" style="padding:0px;text-align:center;margin:0 auto;">
    <div style="width:1392px;margin:0 auto;text-align:center;">
        @using (Html.BeginForm(FormMethod.Post, htmlAttributes: new { @class = "layui-form", id = "myForm" }))
        {
            @Html.AntiForgeryToken()
            <div id="Controls" style="border: 1px solid #ddd; width: 300px; float: left; height: 747px;">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend style="font-size:13px;">布局组件</legend>
                </fieldset>

                <div class="list-group-item">
                    <a>
                        <i class="iconfont ri-input-method-line"></i>
                        <span>标签</span>
                        <input class="data" type="hidden" value="PHNwYW4+5qCH6aKYPC9zcGFuPg==" />
                    </a>
                </div>
                 


                <fieldset class="layui-elem-field layui-field-title" style="margin: 20px 0;clear:both;width:100%;float:left;">
                    <legend style="font-size:13px;">上传组件</legend>
                </fieldset>
            </div>
            <div id="Property" style="border: 1px solid #ddd; float: right; width: 250px; padding:10px; background-color: #fff; text-align:left;">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend style="font-size:13px;" id="rowInfo">行属性</legend>
                </fieldset>                
                <div>
                    <div class="title" title="行高">标签行高</div>
                    <div style="width:120px;">
                        <select id="Colspan">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>
                    </div>                    
                </div>
                <div>
                    <div class="title" title="列宽">列宽(合计100)，当前列宽合计&nbsp;&nbsp;<span id="trWidth">0</span></div>
                    <div id="tdConfig">
                        <div data-index="0">
                            <input type="number" min="1" max="100" value="100" class="layui-input" autocomplete="off" placeholder="宽度" />
                            <i class="layui-icon layui-icon-close-fill"></i>
                        </div>
                    </div>
                    <div style="clear:both;">
                        <button type="button" class="layui-btn layui-btn-sm" onclick="addItemColspan(this)" style="margin-right:12px;">添加一列</button>
                    </div>
                </div>

            </div>
            <div id="Content" style="border: 1px solid #ddd; min-height: 707px; padding: 20px; margin-left: 310px; margin-right: 280px; background-color: #fff;width:750px;">                 
                <table class="layui-table mytable" style="width: 100%;" data-index="1">                    
                    <tbody>
                        <tr><td style="width:20%"></td><td style="width:20%"></td><td style="width:20%"></td><td style="width:20%"></td><td style="width:20%"></td></tr>
                    </tbody>                    
                </table>
                <table class="layui-table mytable" style="width: 100%;" data-index="2">
                    <tbody>
                        <tr><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.7%"></td></tr>
                    </tbody>
                </table>
                <table class="layui-table addItemRow" style="width: 100%;" data-index="3">
                    <tfoot>
                        <tr><td colspan="6" style="text-align:right;"><button type="button" class="layui-btn layui-btn-sm" onclick="addItem()" style="margin-right:12px;">添加一行</button></td></tr>
                    </tfoot>
                </table>
            </div>

        }
    </div>
   
</div>
<script type="text/javascript" src="~/js/base64.min.js"></script>
<script type="text/javascript" src="~/js/Sortable.js"></script>
<script type="text/javascript">
    function addItem() {
        var lastIndex = $("#Content .mytable").last().attr("data-index");
        var newIndex = parseInt(lastIndex) + 1;
        $("#Content .addItemRow").before('<table class="layui-table mytable" data-index="' + newIndex+'" style="width:100%;"><tbody><tr><tr><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.66%"></td><td style="width:16.7%"></td></tr></tr></tbody></table>');
        InintControl();
    }
</script>
<script type="text/javascript">

    new Sortable(Controls, {
        group: {
            name: 'shared',
            pull: 'clone',
            put: false,
        },
        animation: 150,
        sort: false,
        onEnd: function (evt) {            
            if ($(evt.to).prop("id") != "Controls" && $(evt.from).prop("id") == "Controls") {
                var origEl = evt.item;
                var cloneEl = evt.clone;
                var base64Info = $(cloneEl).find(".data").val();
                var contolInfo = Base64.decode(base64Info);
                origEl.innerHTML = contolInfo;
                
            }
        },

    });
    new Sortable(Content, {
        group: 'shared',
        animation: 150,
        onEnd: function (evt) {
            console.log(evt.clone.innerHTML)
            console.log(evt.item.innerHTML)
            if ($(evt.clone).hasClass("hang")) {
                if ($(evt.to).prop("id") != "Content") {
                    evt.clone.innerHTML = evt.item.innerHTML;
                    evt.item.innerHTML = "";
                    return;
                }
            }
        },
    });

    function InintControl() {
        //$("#Content .layui-row").each(function (index, item) {
        //    new Sortable(item, {
        //        group: 'shared',
        //        animation: 150
        //    });
        //});
        $("#Content .layui-table tbody td").each(function (index, item) {
            new Sortable(item, {
                group: 'shared',
                animation: 150
            });
        });
    }
    InintControl();
</script>
<script type="text/javascript">
    $(".Preview").click(function () {
        var infos = [];
        $("#Content .ConfigInfo").each(function (index, item) {
            infos.push($.parseJSON($(item).val()));
        });
        $.ajax({
            type: 'POST',
            url: '/Admin/CustomForm/ShowPreview',//发送请求
            traditional: true,
            data: { infos: JSON.stringify(infos) },
            dataType: "html",
            success: function (result) {
                var htmlCont = result;
                layer.open({
                    type: 1,
                    title: '表单预览',
                    shadeClose: false,
                    area: ['90%', '90%'],
                    content: htmlCont
                });
            }
        });
    });
    $(".saveCustomForm").click(function () {
        var infos = [];
        $("#Content .ConfigInfo").each(function (index, item) {
            infos.push($.parseJSON($(item).val()));
        });
        $.ajax({
            type: 'POST',
            url: '/Admin/CustomForm/SaveCustomForm',//发送请求
            traditional: true,
            data: { id:@Model.ID, infos: JSON.stringify(infos) },
            dataType: "json",
            success: function (result) {
                if (result.State == 200) {
                    layer.msg("表单保存成功!");
                }
                else {
                    layer.msg(result.Msg);
                }
            }
        },'json');

    });
</script>
<script type="text/javascript">
    var currentTable = null;
    $("#Content").on('click', '.mytable tbody tr', function () {
        currentTable = $(this).parentsUntil("#Content").last();
        InintRightItmes();
    });

    $("#Content").on('click', '.mytable tbody tr td span', function () {
        currentTable = $(this).parentsUntil("#Content").last();
        InintRightItmes();
    });

    $("#Property").on('click', '.layui-icon-close-fill', function () {
        var index = $(this).parent().attr("data-index");
        $(this).parent().remove();
        currentTable.find("td").eq(index).remove();
        InintRightItmes();
        if (currentTable.find("td").length == 0) {//所有单元格都被删除，删除当前tr(table) 
            currentTable.remove();
            var index = 1;
            $("#Content .mytable").each(function () {
                $(this).attr("data-index", index);
                index++;
            });
        }
    });
    

    function InintRightItmes() {
        $("#rowInfo").html("第&nbsp;" + currentTable.attr("data-index") + "&nbsp;行属性");
        var tdConfigContent = "";
        index = 0;
        currentTable.find("td").each(function (index, item) {             
            var width = $(item).prop("style").width.replace("%", "");;
            tdConfigContent += '<div data-index="' + index + '"><input type="number" min="1" max="100" step="0.01" value="' + width + '" class="layui-input" autocomplete="off" placeholder="宽度" /><i class="layui-icon layui-icon-close-fill"></i></div>';
            index++;
        });
        $("#tdConfig").html(tdConfigContent);
        GetCurrentTrAllWidth();
    }

    function addItemColspan(obj) {
        if (currentTable == "" || currentTable == null) {
            layer.msg("请选择表格的任意一行再操作");
            return;
        }
        var lastIndex = $("#tdConfig div").last().attr("data-index");
        var newIndex = parseInt(lastIndex) + 1;
        $("#tdConfig").append('<div data-index="' + newIndex + '"><input type="number" min="1" max="100" value="0" class="layui-input" autocomplete="off" placeholder="宽度" /><i class="layui-icon layui-icon-close-fill"></i></div>');
        currentTable.find("tr").append('<td style="width:0%"></td>');
        InintControl();
    }

    $("#tdConfig").on('input', "input", function (e) {
        var value = $(this).val()
        var index = $(this).parent().attr("data-index");
        currentTable.find("td").eq(index).css("width", value + "%");
        GetCurrentTrAllWidth();
    });

    function GetCurrentTrAllWidth() {
        var width = 0;
        currentTable.find("td").each(function (index, item) {
            width += parseFloat($(item).prop("style").width.replace("%", ""));            
        });
        width = width.toFixed(2);
        if (width < 100) {
            $("#trWidth").html("<span style='color:green'>" + width + "</span>");
        }
        else if (width > 100) {
            $("#trWidth").html("<span style='color:red'>" + width + "</span>");
        }
        else {
            $("#trWidth").html(width);
        }
    }
</script>